import React, { useState } from "react";
import { Card, Tabs, Button, Descriptions, List, Modal, Form, Input, Space, message } from "antd";
import { useParams } from "react-router-dom";
import Layout from "../../components/Layout";

const { TabPane } = Tabs;

const mockPatient = {
  id: "p1",
  name: "张三",
  gender: "男",
  age: 34,
  idNumber: "410101198708083611",
};

const mockRecords = [
  { date: "2024-05-01", desc: "膝关节手术后复查，恢复良好。" },
  { date: "2024-05-12", desc: "膝关节疼痛加重，给予理疗。" },
];

const mockDrugs = [
  { date: "2024-05-02", name: "氨糖胶囊", usage: "每日2次" },
  { date: "2024-05-13", name: "消炎药片", usage: "每日1次" },
];

const PatientDetail: React.FC = () => {
  const { id } = useParams();
  const [recordModal, setRecordModal] = useState(false);
  const [prescModal, setPrescModal] = useState(false);
  const [form] = Form.useForm();
  const [drugForm] = Form.useForm();
  const [records, setRecords] = useState(mockRecords);
  const [drugs, setDrugs] = useState(mockDrugs);

  const handleAddRecord = async () => {
    const values = await form.validateFields();
    setRecords(rec => [...rec, { date: new Date().toISOString().slice(0,10), desc: values.desc }]);
    setRecordModal(false);
    form.resetFields();
    message.success("诊疗记录添加成功");
  };
  const handleAddDrug = async () => {
    const values = await drugForm.validateFields();
    setDrugs(drugList => [...drugList, { date: new Date().toISOString().slice(0,10), name: values.name, usage: values.usage }]);
    setPrescModal(false);
    drugForm.resetFields();
    message.success("处方添加成功");
  };
  return (
    <Layout title="患者详情">
      <div className="patient-detail-container">
        <div className="page-header">
          <h1 className="page-title">患者详情</h1>
        </div>
        
        <Card className="apple-card patient-detail-card">
        <Tabs defaultActiveKey="info" className="apple-tabs">
          <TabPane tab="基本信息" key="info">
            <Descriptions 
              bordered 
              size="small" 
              column={1} 
              className="patient-info-descriptions"
            >
              <Descriptions.Item label="姓名" className="info-item">{mockPatient.name}</Descriptions.Item>
              <Descriptions.Item label="性别" className="info-item">{mockPatient.gender}</Descriptions.Item>
              <Descriptions.Item label="年龄" className="info-item">{mockPatient.age}</Descriptions.Item>
              <Descriptions.Item label="身份证号" className="info-item">{mockPatient.idNumber}</Descriptions.Item>
            </Descriptions>
          </TabPane>
          <TabPane tab="历史病历" key="history">
            <List
              bordered
              dataSource={records}
              className="history-list"
              renderItem={item => (
                <List.Item className="history-item">
                  <div className="record-date">{item.date}</div>
                  <div className="record-desc">{item.desc}</div>
                </List.Item>
              )}
              footer={
                <Button 
                  type="primary" 
                  onClick={()=>setRecordModal(true)} 
                  className="apple-button"
                >
                  添加诊疗记录
                </Button>
              }
            />
          </TabPane>
          <TabPane tab="用药记录" key="medicine">
            <List
              bordered
              dataSource={drugs}
              className="medicine-list"
              renderItem={item => (
                <List.Item className="medicine-item">
                  <div className="medicine-header">
                    <div className="medicine-date">{item.date}</div>
                    <div className="medicine-name">{item.name}</div>
                  </div>
                  <div className="medicine-usage">用法用量：{item.usage}</div>
                </List.Item>
              )}
              footer={
                <Button 
                  type="primary" 
                  onClick={()=>setPrescModal(true)} 
                  className="apple-button"
                >
                  开具处方
                </Button>
              }
            />
          </TabPane>
        </Tabs>
      <Modal
        open={recordModal}
        title="添加诊疗记录"
        onCancel={()=>setRecordModal(false)}
        onOk={handleAddRecord}
        className="apple-modal"
      >
        <Form form={form} className="record-form">
          <Form.Item 
            name="desc" 
            label="记录内容" 
            rules={[{ required: true, message: "请输入诊疗内容" }]}
          > 
            <Input.TextArea rows={4} className="apple-textarea" />
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        open={prescModal}
        title="开具处方"
        onCancel={()=>setPrescModal(false)}
        onOk={handleAddDrug}
        className="apple-modal"
      >
        <Form form={drugForm} className="prescription-form">
          <Form.Item 
            name="name" 
            label="药品名称" 
            rules={[{ required: true }]} 
          > 
            <Input className="apple-input" />
          </Form.Item>
          <Form.Item 
            name="usage" 
            label="用法用量" 
            rules={[{ required: true }]} 
          > 
            <Input className="apple-input" />
          </Form.Item>
        </Form>
      </Modal>
      </Card>
      </div>
    </Layout>
  );
};
export default PatientDetail;
